<template>
    <div class="container">
        <div class="header">
            <span>商圈：</span>
            <el-select class="status-select" v-model="quyu" size="small" placeholder="请选择">
                <el-option label="全部" value></el-option>
                <el-option v-for="i in quyuList" :label="i.name" :value="i.name" :key="i.id"></el-option>
            </el-select>
            <el-input
                class="goodsName"
                v-model="adminName"
                size="small"
                placeholder="商家编号"
                clearable
            ></el-input>
            <el-input
                class="goodsName"
                v-model="brandName"
                size="small"
                placeholder="商家名称"
                clearable
            ></el-input>
            <el-button type="primary" size="small" @click="getData" icon="el-icon-search">搜索</el-button>
            <el-button type="primary" size="small" @click="quyuDialog = true">商圈管理</el-button>
        </div>
        <el-table :data="list" style="width: 100%" v-loading="loading">
            <el-table-column prop="id" label="商家ID"></el-table-column>
            <el-table-column prop="name" label="商家名称"></el-table-column>
            <el-table-column prop="quyu" label="区域"></el-table-column>
            <el-table-column label="店铺门头照">
                <template #default="scope">
                    <el-image
                        style="width: 80px; height: 80px"
                        :src="scope.row.picUrl"
                        :preview-src-list="[scope.row.picUrl]"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="dust" label="花粉"></el-table-column>
            <el-table-column prop="businesstime" label="营业时间"></el-table-column>
            <el-table-column prop="tel" label="电话"></el-table-column>
            <el-table-column prop="zhuanquvalue" label="商品额度"></el-table-column>
            <el-table-column prop="balance" label="商家余额"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
            <el-table-column prop="addTime" label="注册时间" width="90%"></el-table-column>
            <el-table-column prop="dtsAdmin.username" label="商家账号"></el-table-column>
            <el-table-column label="审核状态">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.dtsAdmin.audit === 0" type="primary" size="mini">初审中</el-tag>
                    <el-tag v-if="scope.row.dtsAdmin.audit === 1" type="primary" size="mini">复审中</el-tag>
                    <el-tag v-if="scope.row.dtsAdmin.audit === 2" type="success" size="mini">已通过</el-tag>
                    <el-tag v-if="scope.row.dtsAdmin.audit === 3" type="danger" size="mini">已拒绝</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" @click="openEditModal(scope.row)">编辑</el-button>
                    <el-button @click="sendPollen(scope.row)" type="text" size="mini">送花粉</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div v-if="list.length" class="pagination">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="page.num"
                :page-size="page.size"
                layout="total, prev, pager, next"
                :total="page.total"
            ></el-pagination>
        </div>
        <el-dialog title="编辑" :visible.sync="dialogVisible" width="950px">
            <div class="dialog-inner">
                <el-form label-width="120px" size="small">
                    <el-form-item label="商家名称:">
                        <el-input v-model="form.name" maxlength="20"></el-input>
                    </el-form-item>
                    <el-form-item label="商家简介:">
                        <el-input v-model="form.desc" type="textarea" maxlength="200"></el-input>
                    </el-form-item>
                    <el-form-item label="所在地址:">
                        <el-input v-model="form.address" maxlength="20"></el-input>
                    </el-form-item>
                    <el-row :gutter="0">
                        <el-col :span="9">
                            <el-form-item label="联系电话:">
                                <el-input v-model="form.tel" class="inline-cell"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="9">
                            <el-form-item label="营业时间:">
                                <el-input v-model="form.businesstime" class="inline-cell"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-form-item label="所在商圈:">
                        <el-select v-model="form.quyu" class="inline-cell">
                            <el-option
                                v-for="i in quyuList"
                                :key="i.id"
                                :label="i.name"
                                :value="i.name"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商家门头照:">
                        <ImgUploader v-model="form.picUrl" />
                    </el-form-item>
                    <el-form-item label>
                        <el-button @click="updateData" type="primary">提 交</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>
        <el-dialog title="花粉赠送" :visible.sync="pollenDialog" width="30%">
            <el-input v-model="dust" placeholder="请输入花粉值"></el-input>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="send">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="商圈管理" :visible.sync="quyuDialog" width="600px">
            <el-tag
                v-for="i in quyuList"
                :key="i.name"
                closable
                @close="deleteQuyu(i.id)"
                class="quyu-tag"
            >{{i.name}}</el-tag>
            <el-input
                class="input-new-tag"
                v-if="inputVisible"
                v-model="inputQuyuValue"
                ref="saveTagInput"
                size="small"
                @keyup.enter.native="handleInputConfirm"
                @blur="handleInputCancel"
            ></el-input>
            <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput"
                icon="el-icon-plus"
            >新增</el-button>
        </el-dialog>
    </div>
</template>

<script>
import * as request from "@/api/merchant";
import ImgUploader from "@/components/ImgUploader";
export default {
    components: {
        ImgUploader
    },
    data() {
        return {
            quyu: "",
            adminName: "",
            brandName: "",
            quyuList: [],
            list: [],
            loading: false,
            dialogVisible: false,
            pollenDialog: false,
            dust: "",
            form: {
                id: "",
                name: "",
                desc: "",
                address: "",
                tel: "",
                businesstime: "",
                quyu: "",
                picUrl: ""
            },
            page: {
                size: 10,
                num: 1,
                total: 0
            },
            // 区域管理
            quyuDialog: false,
            inputVisible: false,
            inputQuyuValue: ''
        };
    },
    mounted() {
        this.getQuyu();
        this.getData();
    },
    methods: {

        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },

        async handleInputConfirm() {
            this.inputVisible = false;
			if (!this.inputQuyuValue) {
                return this.$message.warning("请输入区域名称");
            }
            try {
                const { errno, errmsg } = await request.quyuAdd({ quyu: this.inputQuyuValue });
                if (errno === 0) {
                    this.$message.success(errmsg);
                    this.getQuyu()
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.error(err);
            }
            this.inputQuyuValue = '';
        },
        handleInputCancel() {
            this.inputVisible = false;
            this.inputQuyuValue = '';
        },
        async deleteQuyu(id) {
            try {
				await this.$confirm('确认删除?', '提示', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                const { errno, errmsg } = await request.quyuDelete({ id });
                if (errno === 0) {
                    this.$message.success(errmsg);
                    this.getQuyu()
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.error(err);
            }
        },
        handleCurrentChange(val) {
            this.page.num = val;
            this.getData();
        },

        /*获取区域列表*/
        async getQuyu() {
            try {
                const { errno, data, errmsg } = await request.quyu();
                if (errno === 0) {
                    this.quyuList = data || [];
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.error(err);
            }
        },

        /* 获取列表数据 */
        async getData() {
            this.loading = true;
            let query = {
                quyu: this.quyu,
                brandName: this.brandName,
                adminName: this.adminName,
                num: this.page.num,
                size: this.page.size
            };
            try {
                const { errno, data, errmsg } = await request.getDetailList(query);
                if (errno === 0) {
                    this.list = data.list || [];
                    this.page.total = data.total;
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.error(err);
            }
            this.loading = false;
        },

        openEditModal(item) {
            this.dialogVisible = true;
            this.form.id = item.id;
            this.form.name = item.name || "";
            this.form.desc = item.desc || "";
            this.form.address = item.address || "";
            this.form.tel = item.tel || "";
            this.form.businesstime = item.businesstime || "";
            this.form.quyu = item.quyu || "";
            this.form.picUrl = item.picUrl || "";
        },

        /* 修改信息 */
        async updateData() {
            try {
                const { errno, errmsg } = await request.updateBrand(this.form);
                if (errno === 0) {
                    this.$message.success(errmsg);
                    this.getData();
                    this.dialogVisible = false;
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.error(err);
            }
        },
        // 赠送花粉
        sendPollen(item) {
            this.pollenDialog = true;
            this.form.id = item.id;
        },
        async send() {
            try {
                let params = {
                    dust: this.dust,
                    branid: this.form.id
                };
                const { errno, data, errmsg } = await request.send(params);
                if (errno === 0) {
                    this.pollenDialog = false;
                    this.dust = "";
                    this.form.id = "";
                    this.$message.success(errmsg);
                    this.getData();
                } else {
                    this.$message.warning(errmsg);
                }
            } catch (err) {
                console.error(err);
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.container {
    padding: 20px;
}
.header {
    margin-bottom: 20px;
    .status-select {
        margin-right: 20px;
    }
    .goodsName {
        width: 200px;
        margin-right: 10px;
    }
}
.dialog-inner {
    margin-top: -20px;
    padding: 0 10px;
}
.inline-cell {
    width: 160px;
    margin-right: 8px;
}
.pagination {
    margin: 25px 0;
    text-align: center;
}
.quyu-tag {
    margin-right: 12px;
    margin-bottom: 10px;
}
.button-new-tag {
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
}
.input-new-tag {
    width: 90px;
}
</style>
